<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getUserList, User } from "./api/user";
import UserEditor from "./components/editor/UserEditor.vue";

const userList = ref<User[]>();
const editor = ref();

const addUser = (id?: number) => {
  editor.value.init(id);
};

const fetchUserList = async () => {
  let { data } = await getUserList();
  userList.value = data.data;
};

onMounted(() => {
  fetchUserList();
});
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <UserEditor @finished="fetchUserList" ref="editor" />
  <a-button @click="addUser()">new</a-button>

  <ul>
    <li v-for="user in userList" :key="user.id">
      id:{{ user.id }}
      <!-- -->
      name:{{ user.username }}
      <!-- -->
      pass:{{ user.password }} regTime:{{ user.regTime }}
      <a-button @click="addUser(user.id)">edit</a-button>
    </li>
  </ul>
</template>
